<template>
	<view class="content">
		<view class="content-view">
			<uni-card>
			    <text class='site'>{{details.data.name}}</text>
				<text style='float: right;'>收藏</text>
				<text class='address'>设备编号:010226678</text>
				<text class='address'>设备地址:{{details.data.address}}</text>
				<view class='card-bottom'style='margin-left: -18px'>
					<image class='distanceImg' src='../../static/distanceImg.png'></image>
					<text style='float: left;color:#00000059'>距{{details.data.distance}}km</text>
				</view>
				<view class='card-bottom'style='float: right;margin-right: -18px'>
					<image class='distanceImg' src='../../static/distanceImg.png'></image>
					<text style='float: left;color:#00000059'>联系客服</text>
				</view>
			</uni-card>
		</view>
		
		<view class='warehouse'>
			<view  v-for="(item, index) in warehouseList" :key='index' style='width: calc(25% - 10px);float: left;margin: 5px;height:80px;'>
				<text class='state'>{{item.state}}</text>
				<text class='state-number'>{{item.number}}号仓</text>
			</view>
		</view>
		
		<view class="content-view">
			<uni-card>
			    <text style='width: 100%;float: left;font-weight: 900;font-size: 15px;'>收费标准</text>
				<text class='criterion'>时段</text>
				<text class='criterion'>充电费用</text>
				<text class='criterion'>占仓费用</text>
				<text class='criterion'>22:00-07:59</text>
				<text class='criterion'>2元/12小时</text>
				<text class='criterion' style='line-height: 20px;'>所选充电时间段内免费</text>
				<text class='criterion' style='height: 80px;'>超出0.5元/小时 2元封顶</text>
				<text class='criterion' style='height: 80px;line-height: 80px;'>08:00-22:00</text>
				<text class='criterion'>1元/4小时</text>
				<text class='criterion'>2元/10小时</text>
			</uni-card>
		</view>
		
		<view style='width: 100%;text-align: center;height: 40px;line-height: 40px;background: #169bd5;position: fixed;bottom: 0px;border-radius: 5px;'>
		<image mode='aspectFit' style='width: 25px;height: 40px;float: left;margin-left: 110px;' src='../../static/u217.png'></image>
		<text style='float: left;height: 40px;color: #fff;'>扫码充电</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {
					data:{
						name: '',
						signal: 0,
						distance: '',
						address: '',
						leisure: 0,
						sum: 0,
					}
					
				},
				warehouseList: [
					{
						state: '空闲',
						number: 1
					},
					{
						state: '空闲',
						number: 2
					},
					{
						state: '空闲',
						number: 3
					},
					{
						state: '空闲',
						number: 4
					},
					{
						state: '空闲',
						number: 5
					},
					{
						state: '空闲',
						number: 6
					},
					{
						state: '空闲',
						number: 7
					},
					{
						state: '空闲',
						number: 8
					}
				],
			}
		},
		onLoad() {
			let that = this;
			uni.getStorage({
				key:'storage_home',
				success:function(res){
					let data = JSON.parse(res.data);
					// that.$set(that.details,'data',data)
				}
			});
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	@width:100%;
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.distanceImg{
		width: 20px;
		height: 20px;
		margin-top: 6px;
		float: left;
		margin-left: calc(50% - 40px);
	}
	.site{
		font-size: 18px;
		font-weight: 900;
	}
	.address{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		float: left;
	}
	.card-bottom{
		float: left;
		width: calc(50% + 18px);
		text-align: center;
		background: #007eff33;
		height: 30px;
		line-height: 30px;
	}
	.warehouse{
		float: left;
		width: calc(100% - 20px);
		background: #fff;
		border-radius: 6px;
	}
	.state{
		height: 50px;
		float: left;
		border-radius: 90px;
		width: 50px;
		margin: 5px;
		border: 2px solid #14ef7f;
		line-height: 50px;
		text-align: center;
	}
	.state-number{
		float: left;
		width: 100%;
		text-align: center;
	}
	.criterion{
		float: left;
		width: calc(33.33% - 1px);
		text-align: center;
		background: #169bd542;
		margin-right: 1px;
		height: 40px;
		line-height: 40px;
		margin-bottom: 1px;
	}
</style>
